<template>
    <div class="app-container">
        <!-- 搜索 -->
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="收款类型" prop="recordType">
                <el-select v-model="queryParams.recordType" placeholder="请选择">
                    <el-option v-for="item in dict.type.self_pay_record_type" :key="item.value" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="客户名称" prop="customerName">
                <el-input v-model="queryParams.customerName" placeholder="请输入客户名称" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="订单编号" prop="orderNumber">
                <el-input v-model="queryParams.orderNumber" placeholder="请输入订单编号" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="订单来源" prop="orderSource">
				<el-select v-model="queryParams.orderSource" placeholder="请选择">
					<el-option v-for="item in dict.type.sys_order_type" :key="item.id" :label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
            <el-form-item label="物流单号" prop="deliveryNumber">
                <el-input v-model="queryParams.deliveryNumber" placeholder="请输入物流单号" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="收款备注" prop="remark">
                <el-input v-model="queryParams.remark" placeholder="请输入收款备注" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <!-- 防止仅有一个输入框时光标在那一个输入框里时按回车出现“正在加载系统资源，请耐心等待” -->
            <el-form-item label="客服" prop="csName">
                <el-select v-model="queryParams.csName" placeholder="请选择">
                    <el-option v-for="item in userList" :key="item.value" :label="item.label" :value="item.label">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="套餐名称" prop="packageName">
                <el-select v-model="queryParams.packageName" placeholder="请选择" filterable remote reserve-keyword
                    :remote-method="remoteMethod" :loading="loading" clearable @clear="remoteMethod">
                    <el-option v-for="item in paylist" :key="item.id" :label="item.title" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="审核状态" prop="auditStatus">
                <el-select v-model="queryParams.auditStatus" placeholder="请选择">
                    <el-option v-for="item in dict.type.sys_pay_audit_status" :key="item.value" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="收款方式" prop="accountTypeName">
                <el-select v-model="queryParams.accountTypeName" placeholder="请选择">
                    <el-option v-for="item in dict.type.sys_price_type" :key="item.value" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="收款账号" prop="accountNumber">
                <el-select v-model="queryParams.accountNumber" placeholder="请选择">
                    <el-option v-for="item in shoukuanList" :key="item.value" :label="item.label"
                        :value="item.accountNumber">
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <div style="width: 60%;">{{ item.accountTypeName }}</div>
                            <div><span style="color: #606266;">{{ item.accountNumber }}</span></div>
                        </div>
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="审核时间" prop="dateRange2">
                <el-date-picker v-model="queryParams.dateRange2" type="daterange" range-separator="至"
                    start-placeholder="开始日期" style="width: 240px" value-format="yyyy-MM-dd" end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="收款日期" prop="dateRange3">
                <el-date-picker v-model="queryParams.dateRange3" type="daterange" range-separator="至"
                    start-placeholder="开始日期" style="width: 240px" value-format="yyyy-MM-dd" end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="创建时间" prop="dateRange">
                <el-date-picker v-model="queryParams.dateRange" type="daterange" range-separator="至"
                    start-placeholder="开始日期" style="width: 240px" value-format="yyyy-MM-dd" end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <!-- 防止仅有一个输入框时光标在那一个输入框里时按回车出现“正在加载系统资源，请耐心等待” -->
            <input hidden />

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 工具栏 -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5" style="margin-right: 50px;">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                    v-hasPermi="['pay:record:export']">导出</el-button>
            </el-col>

            <el-col :span="1.5">
                <el-tag>收款金额：{{ sumPricedata.amount_payment_sum }}</el-tag>
            </el-col>
            <el-col :span="1.5">
                <el-tag>抵扣金额：{{ sumPricedata.amount_deduct_sum }}</el-tag>
            </el-col>
            <el-col :span="1.5">
                <el-tag>增值金额：{{ sumPricedata.amount_get_sum }}</el-tag>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getDataList"></right-toolbar>
        </el-row>

        <!-- 表格 -->
        <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="ID" prop="id" width="60" />
            <el-table-column label="收款类型" prop="recordType" width="80">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.self_pay_record_type" :value="scope.row.recordType" />
                </template>
            </el-table-column>
            <el-table-column label="订单号" prop="orderNumber" width="150" />
            <el-table-column label="订单来源" prop="orderSource" width="150" />

            <el-table-column label="客户名称" prop="customerName" width="120" show-overflow-tooltip />
            <el-table-column label="所属客服" prop="csName" width="120" />
            <el-table-column label="套餐名称" prop="packageName" width="100" show-overflow-tooltip />
            <el-table-column label="收款金额" prop="amountPayment" width="100" show-overflow-tooltip />
            <el-table-column label="抵扣金额" prop="amountDeduct" width="80" show-overflow-tooltip />
            <el-table-column label="物流单号" prop="deliveryNumber" width="120" show-overflow-tooltip />
            <el-table-column label="到账金额" prop="amountGet" width="80" show-overflow-tooltip />
            <el-table-column label="支付凭证" width="140" show-overflow-tooltip>
                <template slot-scope="scope">
                    <div style="display: flex;">
                        <el-image v-for="(its, index) in scope.row.filePayment" :key="index"
                            style="width: 30px; height: 30px;margin-right: 10px;" :src="its"
                            :preview-src-list="scope.row.filePayment"> </el-image>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="收款备注" prop="remark" width="200" show-overflow-tooltip />

            <el-table-column label="收款方式" prop="accountTypeName" width="80">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.sys_price_type" :value="scope.row.accountTypeName" />
                </template>
            </el-table-column>
            <el-table-column label="收款账号" prop="accountNumber" width="120" show-overflow-tooltip />
            <el-table-column label="审核状态" prop="auditStatus" width="80">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.sys_pay_audit_status" :value="scope.row.auditStatus" />
                </template>
            </el-table-column>

            <el-table-column label="收款日期" prop="datePayment" width="100">
                <template slot-scope="scope">
                    <div>{{ scope.row.datePayment.slice(0, 10) }}</div>
                </template>
            </el-table-column>
            <el-table-column label="审核时间" prop="auditTime" width="150" />
            <el-table-column label="创建时间" prop="createTime" width="150" />
            <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" :disabled="scope.row.auditStatus == '1' ? true : false" type="text"
                        v-hasPermi="['pay:record:audit']" @click="handleShenhe(scope.row)">审核</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getDataList" />
        <!-- 排产 -->
        <el-dialog title="充值审核" :visible.sync="planShow" width="500px" append-to-body>
            <!-- 请仔细查看收款内容，仔细确认后提交审核！！ -->
            <el-form ref="forms" size="medium" :model="form" label-width="100px" :rules="rulesf">
                <el-form-item label="审核状态" prop="auditStatus">
                    <el-radio-group v-model="form.auditStatus">
                        <el-radio :label="1">通过</el-radio>
                        <el-radio :label="9">不通过</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="planCancel">取消</el-button>
                <el-button type="primary" @click="planConfirm">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// 客户管理

import {
    getList, getSum, getPayList, scheduYes, getListSk
} from '@/api/order/pay'
import { getUserListRole } from '@/api/group'
export default {
    dicts: ["self_pay_record_type", "sys_price_type", "sys_pay_audit_status",'sys_order_type'],
    data() {
        // 验证手机号码
        const validateMobile = (rule, value, callback) => {
            if (!validMobile(value)) {
                callback(new Error('请输入正确的手机号码'))
            } else {
                callback()
            }
        }
        return {
            // 遮罩层
            loading: true,
            loadings: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                recordType: undefined,
                customerName: undefined,
                orderNumber: undefined,
                csName: undefined,
                packageName: undefined,
                auditTimeBegin: undefined, //审核时间
                auditTimeEnd: undefined,
                beginTime: undefined, //审核时间
                endTime: undefined,
                orderSource:undefined,
                deliveryNumber: undefined,
                auditStatus: undefined,
                accountTypeName: undefined,
                accountNumber: undefined,
                dateRange: [],
                dateRange2: [],
                dateRange3: [],
                remark: undefined
            },
            // 数据列表
            dataList: [],
            // 生产角色下所有用户列表
            scUserList: [],
            // 添加弹框标题
            addDialogTitle: '',
            // 添加弹框是否显示
            sumPricedata: {
                amount_deduct_sum: 0,
                amount_get_sum: 0,
                amount_payment_sum: 0,
            },
            userList: [],
            paylist: [],
            form: {
                id: 0,
                auditStatus: ''
            },
            rulesf: {
                auditStatus: [{ required: true, message: '请选择审核状态', trigger: 'blur' }]
            },
            planShow: false,
            shoukuanList: [],
        }
    },
    created() {
        this.getDataList()
        getListSk({ pageNum: 1, pageSize: 1000 }).then(res => {
            if (res.code == 200) {
                this.shoukuanList = res.rows
                console.log(res);
            }
        })
        getPayList({}).then(res => {
            this.paylist = res.rows
        })
        getUserListRole({
            codes: 'kefu',
        }).then((response) => {
            this.userList = response.data.map(item => {
                return {
                    label: item.nickName,
                    value: item.userId
                }
            })
            this.userList.unshift({
                label: '超级管理员',
                value: 1
            })
        })
    },
    methods: {
        remoteMethod(query) {
            if (query !== '') {
                this.loadings = true;
                setTimeout(() => {
                    this.loadings = false;
                    getPayList({ title: query }).then(res => {
                        this.paylist = res.rows
                    })
                }, 200);
            } else {
                getPayList({}).then(res => { this.paylist = res.rows })
            }
        },
        /** 查询列表 */
        getDataList() {
            this.loading = true
            this.queryParams.datePaymentBegin = this.queryParams.dateRange3[0]
            this.queryParams.datePaymentEnd = this.queryParams.dateRange3[1]
            this.queryParams.auditTimeBegin = this.queryParams.dateRange2[0]
            this.queryParams.auditTimeEnd = this.queryParams.dateRange2[1]
            this.queryParams.beginTime = this.queryParams.dateRange[0]
            this.queryParams.endTime = this.queryParams.dateRange[1]
            getList(this.queryParams).then((response) => {
                response.rows.forEach(item => {
                    item.filePayment = item.filePayment.split(',')
                })
                this.dataList = response.rows
                this.total = response.total
                this.loading = false
            })
            getSum(this.queryParams).then((res => {
                this.sumPricedata = res.data
            }))
        },
        reset() {
            this.resetForm("addFormRef");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getDataList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = []
            this.dateRange2 = []
            this.dateRange3 = []
            getPayList({}).then(res => {
                this.paylist = res.rows
            })
            this.resetForm('queryForm')
            this.handleQuery()
        },
        /** 多选框选中数据 */
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id)
            this.single = selection.length != 1
            this.multiple = !selection.length
        },
        handleShenhe(row) {
            this.planShow = true
            this.form.id = row.id
        },
        planCancel() {
            this.planShow = false
            this.form = {
                id: 0,
                auditStatus: ''
            }
        },

        planConfirm: function () {
            this.$refs["forms"].validate((valid) => {
                if (valid) {
                    scheduYes(this.form).then((response) => {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.planCancel()
                        this.getDataList()
                    })
                }
            });
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download(
                "pay/record/export",
                {
                    ...this.queryParams,
                },
                `收款明细.xlsx`
            );
        },
    },
}
</script>

<style lang="scss">
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>